<div ng-controller="GuideCtrl" class="doc-content">
  <md-content>
    <p><em>New to Angular? Before getting into Angular Material, it might be helpful to:</em></p>

    <ul>
      <li>
        watch the videos about <a
          href="https://egghead.io/articles/new-to-angularjs-start-learning-here" target="_blank"
          title="AngularJS Framework">Angular.js framework</a></li>
      <li>
        read the
        <a href="https://material.google.com/" target="_blank"
           title="Material Design">Material Design </a> specifications for components,
        animations, styles, and layouts.
      </li>
    </ul>

    <h2>How do I start with Angular Material?</h2>
    <ul style="margin-bottom: 2em;">
      <li>
        Visit the <a href="http://codepen.io/team/AngularMaterial/" target="_blank"
                       title="Codepen Material Community">CodePen Community for Angular Material</a>
      </li>

      <li>
        <a href="https://github.com/angular/material-start/tree/es6-tutorial" target="_blank"
             title="Material-Start Tutorial">Learn with Material-Start: 10-step Tutorial (es6)</a>
      </li>

      <li>
        <a href="https://github.com/angular/material-start/tree/es6" target="_blank"
             title="Material Start - ES6">Learn with Material-Start: Completed (es6)</a>
      </li>

      <li>
        <a href="https://github.com/angular/material-start/tree/typescript" target="_blank"
           title="Material Start - Typescript">Learn with Material-Start: Completed (Typescript)</a>
      </li>

      <li>
        <a href="https://github.com/angular/material-start/tree/master" target="_blank"
           title="Material-Start - ES5">Learn with Material-Start: Completed (es5)</a>
      </li>

      <li>
        <a href="http://codepen.io/team/AngularMaterial/pen/RrbXyW" target="_blank">Start with a
        blank CodePen Material Application</a>
      </li>

      <li style="margin-bottom: 30px;">
        <a href="https://github.com/angular/material-start" target="_blank"
           title="GitHub Starter Project">Use the Github Starter Project</a>
      </li>

      <li>Use the "Edit on CodePen" button on any of our Demos<br/>
        <img
            src="https://cloud.githubusercontent.com/assets/210413/11568997/ed86795a-99b4-11e5-898e-1da172be80da.png"
            style="width:75%;margin: 10px 30px 0 0">
      </li>

    </ul>

    <h3>Build a Material Application (blank shell)</h3>

    <p>
      See this example application on CodePen that loads
      the Angular Material library from the Google CDN:
    </p>

    <iframe height='777' scrolling='no'
            src='//codepen.io/team/AngularMaterial/embed/RrbXyW/?height=777&theme-id=21180&default-tab=html'
            frameborder='no' allowtransparency='true' allowfullscreen='true' style='width: 100%;'>
      See the Pen <a
        href='http://codepen.io/team/AngularMaterial/pen/RrbXyW/'>Angular Material - Blank
      Starter</a> by Angular
      Material (<a href='http://codepen.io/AngularMaterial'>@AngularMaterial</a>) on <a
        href='http://codepen.io'>CodePen</a>.
    </iframe>


    <p>
      Now just your add your Angular Material components and other HTML content to your Blank
      starter app.
    </p>

    <br/>

    <hr>

    <h3>Our CodePen Community</h3>
    <p>
      You can also visit our
      <a href="http://codepen.io/team/AngularMaterial/" target="_blank"
         title="Codepen Community">CodePen Community</a> to explore more samples and ideas.
    </p>
    <div layout-align="center" style="width: 100%">
      <a href="http://codepen.io/collection/XExqGz/" target="_blank" title="Codepen Community"
         style="text-decoration:none; border: 0 none;">
        <img
            src="https://cloud.githubusercontent.com/assets/210413/11613879/544f0b1e-9bf6-11e5-9923-27dd0d891bfd.png"
            style="text-decoration:none; border: 0 none;width: 100%">
      </a>
    </div>


    <br/><br/>
    <hr>

    <h3>Installing the Angular Material Libraries</h3>

    <p>
      You can install the Angular Material library (and its dependent libraries) in your local
      project using either
      <a href="https://github.com/angular/bower-material/#installing-angular-material"
         target="_blank">NPM, JSPM, or Bower</a>.
    </p>

    <p>
      Angular Material also integrates with some additional, optional libraries which you may elect
      to include:
    </p>

    <ul style="margin-bottom: 2em;">
      <li>
        <a href="https://docs.angularjs.org/api/ngMessages">ngMessages</a>
        - Provides a consistent mechanism for displaying form errors and other messages.
      </li>
      <li>
        <a href="https://docs.angularjs.org/api/ngSanitize">ngSanitize</a>
        - The ngSanitize module provides functionality to sanitize HTML content in Material
        components.
      </li>

      <li>
        <a href="https://docs.angularjs.org/api/ngRoute">ngRoute</a>
        - Provides a clean routing system for your application.
      </li>
    </ul>

    <br/>
    <hr>

    <h3>Unsupported Integrations</h3>
    <p>
      Angular Material v1.0 has known integration issues with the following libraries:
    </p>
    <ul style="margin-bottom: 2em;">
      <li>
        <a href="https://docs.angularjs.org/api/ngTouch">ngTouch</a>
        - ngMaterial conflicts with ngTouch for click, tap, and swipe support on touch-enabled
        devices.
      </li>

      <li>
        <a href="http://ionicframework.com/">Ionic</a>
        - Open-source SDK for developing hybrid mobile apps with Web technologies has touch support
        that interferes with ngMaterial's mobile gesture features.
      </li>
    </ul>

    <br/>
    <h2>Contributing to Angular Material</h2>
    <ul style="margin-bottom: 2em;">
      <li>
        Please read our <a href="https://github.com/angular/material#contributing">contributor
        guidelines</a>.
      </li>

      <li>
        To contribute, fork our GitHub <a href="https://github.com/angular/material">repository</a>.
      </li>

      <li>
        For problems,
        <a href="https://github.com/angular/material/issues?q=is%3Aissue+is%3Aopen"
           target="_blank">search the GitHub Issues</a> and/or
        <a href="https://github.com/angular/material/issues/new"
           target="_blank">create a New Issue</a>.
      </li>

      <li>For questions,
        <a href="https://groups.google.com/forum/#!forum/ngmaterial"
           target="_blank">search the Forum</a> and/or post a new question.
      </li>

      <li>
        Join the <a href="https://gitter.im/angular/material" target="_blank">Gitter Chat</a>.
      </li>
    </ul>
  </md-content>
</div>
